
<script setup>
import { toRefs, computed, onMounted, nextTick, onUnmounted } from 'vue'

defineOptions({
  name: 'PopoverForm'
})
const props = defineProps({
  modelValue: Boolean,
  pClass: String,
  width: {
    type: String,
    default: '480px'
  },
  tempRef: {
    type: Object,
    default: () => ({})
  }
})
const {modelValue} = toRefs(props)
const emit = defineEmits(['update:modelValue'])

const visible = computed({
  get: () => modelValue.value,
  set: (val) => {
    emit('update:modelValue', val)
  }
})
const close=()=>{
  visible.value=false
}
let _popover
onMounted(async () => {
  // 点击空白处 关闭浮窗pop
  _popover = document.querySelector('.popover-form')
  await nextTick()
  _popover.focus()
  _popover.addEventListener('blur', close)
  document.querySelector('.table-view__body .el-scrollbar__wrap').addEventListener('scroll', close)
})
onUnmounted(() => {
  document.querySelector('.table-view__body .el-scrollbar__wrap').removeEventListener('scroll', close)
  _popover.removeEventListener('blur', close)
})
</script>
<template>
  <ElPopover
      :popper-class="['popover-form',pClass]"
      placement="right"
      :visible="visible"
      :virtual-ref="props.tempRef"
      virtual-triggering
      trigger="click"
      :width="width"
  >
    <slot/>
  </ElPopover>
</template>
<style lang="scss">
.popover-form {
  .pop-form__header {
    .pop-form__header-title {
      font-size: 24px;
      margin-right: var(--space-primary);
    }

    .pop-form__header-info {
      font-size: 14px;
      font-weight: normal;
      margin-right: var(--space-primary);
    }
  }

  .el-descriptions {
    .el-descriptions__label {
      .el-icon {
        vertical-align: -2px;
      }
    }
  }
}
</style>
